<template>
	<view class="wrap">
		<view class="t-header app_gHeaderFixed">
			<g-header title="进销存报表" rtype="search" :hideRight="true"></g-header>
			<view class="filter u-flex">
				<view class="filter-item u-flex-1 app_flex-aicjcc">
					<text class="app_arrow" :class="{active: filterType == 'date'}"
						@click="showDatePicker = true">{{dateObj.dateTypeName}}</text>
				</view>
				<view class="filter-item u-flex-1 app_flex-aicjcc">
					<text class="app_arrow" :class="{active: filterType == 'type'}"
						@click="showCategory = true">筛选</text>
				</view>
			</view>
		</view>
		<view class="box-main">
			<view class="box-main_top app_flex">
				<view class="diagram">
					<!-- <image src="../../static/images/data-1.png"></image> -->
					<qiun-data-charts type="ring" :opts="copts" :chartData="c1data" />
				</view>
				<view class="data">
					<view class="data2-item">
						<text>入库总数</text>
						<text>{{salesInventoryInfo.total}}</text>
					</view>
					<view class="data2-item" v-for="(item, index) in salesInventoryInfo.details" :key="index">
						<text>{{item.strip}}</text>
						<text>{{item.amount?item.amount:'--'}}</text>
					</view>
				</view>
			</view>
			<view class="box-main_bottom app_flex">
				<view class="data" style="margin-left: 0;">
					<view class="data2-item dot-red">
						<text>出库 {{salesInventoryInfo.outProportion}}%</text>
						<text>{{salesInventoryInfo.outTotal}}</text>
					</view>
					<view class="data2-item" v-for="(item, index) in salesInventoryInfo.outDetails" :key="index">
						<text>{{item.strip}}</text>
						<text>{{item.amount?item.amount:'--'}}</text>
					</view>
				</view>
				<view class="data">
					<view class="data2-item dot-blue">
						<text>库存 {{salesInventoryInfo.inProportion}}%</text>
						<text>{{salesInventoryInfo.inTotal}}</text>
					</view>
					<view class="data2-item" v-for="(item, index) in salesInventoryInfo.inDetails" :key="index">
						<text>{{item.strip}}</text>
						<text>{{item.amount?item.amount:'--'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="itemWrap" v-for="(item, index) in salesInventoryInfo.whProducts" :key="index">
				<view class="item">
					<view class="item-img">
						<image :src="item.cover" mode=""></image>
					</view>
					<view class="item-main">
						<view class="item-title">{{item.productName}}</view>
						<view class="item-mainB">
							<view class="item-mainB_L">
								<text>￥{{item.unitPrice}}/{{item.unit}}</text>
								<text>（{{item.emptyDiff}}）</text>
							</view>
							<view class="item-mainB_R">货号：--</view>
						</view>
					</view>
				</view>
				<view class="detail">
					<view class="detail-item">
						<view class="detail-item_L">入库数量：{{item.inStrip}}</view>
						<view class="detail-item_R">入库数量：{{item.inData || '-'}}</view>
					</view>
					<view class="detail-item">
						<view class="detail-item_L">销售数量：{{item.saleStrip}}</view>
						<view class="detail-item_R">销售数量：{{item.saleData || '-'}}</view>
					</view>
					<view class="detail-item">
						<view class="detail-item_L">库存数量：{{item.inventoryStrip}}</view>
						<view class="detail-item_R">库存数量：{{item.inventoryData || '-'}}</view>
					</view>
				</view>
			</view>
		</view>
		<g-time-picker :show="showDatePicker" @change="onTimePickerFlagChange" @dateChange="onPickerDateChange">
		</g-time-picker>
		<u-popup v-model="showCategory" mode="bottom" border-radius="16" safe-area-inset-bottom>
			<view class="category-item active">全部</view>
			<view class="category-item">入库数量</view>
			<view class="category-item">销售数量</view>
			<view class="category-item">库存数量</view>
			<view class="category-item cancel">取消</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const initBeginDate = new Date(year, month - 1, day - 7 + 1).Format('yyyy-MM-dd')
			const copts = {
				timing: "easeOut",
				duration: 1000,
				rotate: false,
				rotateLock: false,
				color: ["#4C88FF", "#FF6666", "#FAC858", "#91CB74", "#73C0DE", "#3CA272", "#9A60B4",
					"#ea7ccc", "#ea7ccc"
				],
				padding: [0, 0, 0, 0],
				fontSize: 13,
				fontColor: "#666666",
				dataLabel: false,
				dataPointShape: false,
				dataPointShapeType: "solid",
				touchMoveLimit: 60,
				enableScroll: false,
				enableMarkLine: false,
				legend: {
					show: false
				},
				title: {
					name: ""
				},
				subtitle: {
					name: ""
				},
				extra: {
					ring: {
						ringWidth: 20,
						border: false
					},
					tooltip: {
						fontSize: 6
					}
				}
			}
			return {
				filterType: 'none',
				showDatePicker: false,
				showCategory: false,
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				dateObj: {
					beginDate: '1980-01-01',
					endDate: date.Format('yyyy-MM-dd'),
					dateType: 0, // 1:近七天，2:近两周，3:近三周，4:近一月，0:自定义
					dateTypeName: '全部'
				},
				list: [1, 2, 3],
				productSalesInfo: {
					categoryTotals: null,
					details: null,
					productList: [],
					proportionData: null,
					total: null
				},
				productTypeId: '',
				typeList: [],
				activeTypeIndex: 0,
				typeListChildren: [],
				salesInventoryInfo: {},
				copts,
				c1data: {}
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		methods: {
			async updatePage() {
				try {
					this.getSalesInventoryList()
				} catch (e) {
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			getSalesInventoryList() {
				this.$g_api.salesDataWarehouseList({
					beginTime: this.dateObj.beginDate,
					dateType: this.dateObj.dateType,
					endTime: this.dateObj.endDate,
					productTypeId: this.productTypeId,
				}).then(({
					data
				}) => {
					// data.whProducts = [{
					// 	cover: '/profile/upload/2022/05/11/612f54bfbb9b30d14aa014a99bd5d089.jpg',
					// 	emptyDiff: '98%',
					// 	inData: '200/米',
					// 	inStrip: '10/条',
					// 	inventoryData: '203米',
					// 	inventoryStrip: '11/条',
					// 	productName: '小碎花布料小碎花',
					// 	saleData: '100/米',
					// 	saleStrip: '10条',
					// 	unit: '米',
					// 	unitPrice: '18.9',
					// }]
					if(data.whProducts){
						data.whProducts.forEach(item => {
							if (item.cover && item.cover.indexOf('https://') == -1 && item.cover.indexOf('http://') == -
								1) {
								item.cover = this.$g_config.requestUrl + item.cover
							}
						})
					}
					this.c1data = JSON.parse(JSON.stringify({
						series: [{
							data: [{
								"name": "库存",
								"value": data.inProportion || 0
							}, {
								"name": "出库",
								"value": data.outProportion || 0
							}]
						}]
					}))
					this.salesInventoryInfo = data
				})
			},
			onTimePickerFlagChange(val) {
				this.showDatePicker = val
			},
			onPickerDateChange({
				beginDate,
				endDate,
				dateType,
				dateTypeName
			}) {
				this.dateObj.beginDate = beginDate
				this.dateObj.endDate = endDate
				this.dateObj.dateType = dateType
				this.dateObj.dateTypeName = dateTypeName
				this.updatePage()
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx + 90rpx)
	}

	.filter {
		background-color: #fff;
	}

	.filter-item {
		height: 90rpx;

		text {
			font-size: 26rpx;
		}

		.app_arrow {
			&::after {
				right: 0rpx;
				transition: all 0.3s;
				transform: translateY(-70%) rotate(135deg);
			}

			&.active {
				&::after {
					transform: translateY(-10%) rotate(-45deg);
				}
			}
		}
	}

	.box-main {
		padding: 30rpx 30rpx 40rpx 50rpx;
		background-color: #fff;
	}

	.box-main_top {}

	.box-main_bottom {
		margin-top: 40rpx;
	}

	.diagram {
		width: 240rpx;
		height: 240rpx;
		flex-shrink: 0;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.data {
		margin-left: 90rpx;
	}

	.data2-item {
		margin-bottom: 8rpx;
		font-size: 24rpx;
		color: #888;

		&:nth-child(1) {
			color: #333;
		}

		text {
			margin-right: 16rpx;
		}
	}

	.list {
		margin-top: 20rpx;
	}

	.itemWrap {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.item {
		display: flex;
		padding-bottom: 30rpx;
	}

	.item-img {
		width: 120rpx;
		font-size: 0;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.item-main {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.item-mainB {
		display: flex;
		justify-content: space-between;
	}

	.item-mainB_L {
		text {
			&:first-child {
				color: #FF4C4C;
				font-size: 26rpx;
			}

			&:last-child {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}

	.item-mainB_R {
		font-size: 24rpx;
		color: #999;
	}

	.detail {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: $g-main-bg;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.detail-item_L {}

	.detail-item_R {}

	.dot-blue {
		position: relative;

		&::before {
			position: absolute;
			left: -26rpx;
			top: 50%;
			content: '';
			width: 16rpx;
			height: 16rpx;
			transform: translateY(-50%);
			border-radius: 50%;
			background-color: #4C88FF;
		}
	}

	.dot-red {
		position: relative;

		&::before {
			position: absolute;
			left: -26rpx;
			top: 50%;
			content: '';
			width: 16rpx;
			height: 16rpx;
			transform: translateY(-50%);
			border-radius: 50%;
			background-color: #FF6666;
		}
	}

	.category-item {
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999;
		border-bottom: 1px solid $g-border-color;

		&.active {
			color: $g-main-color;
		}

		&.cancel {
			border-top: 20rpx solid $g-border-color;
			font-size: 32rpx;
			color: #333;
		}
	}
</style>
